import { createMaterialTopTabNavigator } from 'react-navigation-tabs';

import { StyleSheet } from 'react-native';
import { colors } from '../constants/theme';

export default function genTabContainer(tabs, scrollEnabled = false) {
  const tabWidth = scrollEnabled ? { width: 100 } : null;
  if (tabs.length === 0) {
    return null;
  }
  const TabNavigtor = createMaterialTopTabNavigator(tabs, {
    tabBarOptions: {
      style: styles.totalStyle,
      indicatorStyle: styles.indicatorStyle,
      labelStyle: styles.labelStyle,
      tabStyle: { ...styles.tabStyle, ...tabWidth },
      scrollEnabled,
    },
    lazy: true
  });
  return TabNavigtor;
}

const styles = StyleSheet.create({
  totalStyle: {
    backgroundColor: colors.secondary,
  },
  indicatorStyle: {
    height: 2,
    backgroundColor: 'white'
  },
  labelStyle: {
    fontSize: 16,
    alignSelf: 'center',
  },
  tabStyle: {
    height: 40,
  }
});
